<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hyphen Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src=../-.js></script>
</head>
<body>
  <!-- Define your custom element with minimal boilerplate -->
  <script>
    class MyGreeting extends $ {
      // Specify observed attributes for automatic property sync
      static get attrs() {
        return ['name'];
      }

      // Define initial state if needed
      constructor() {
        super({ greeting: 'Hello' });
      }

      // Respond to user interaction
      changeGreeting() {
        this.state = { greeting: this.state.greeting == 'Hi' ? 'Hello' : 'Hi' };
      }

      // Declare the template using state directly
      template() {
        return `
          <span>${greeting}, ${host.name}!</span>
          <button onclick="changeGreeting">Change Greeting</button>
        `;
      }
    }
  </script>

  <!-- Use the custom element in HTML, set attributes as properties -->
  <my-greeting name="Cris"></my-greeting>

  <script>
    // The element's contents are rendered automatically when added to the DOM
    const greetingElement = document.querySelector('my-greeting');
    // State can be updated programmatically if necessary
    setTimeout(() => greetingElement.name = 'Awesome Developer', 1500);
  </script>
</body>
</html>
 
